<template>
    <el-menu
        :default-openeds="opened"
        class="left-menu h-100"
        :collapse="folded"
        :collapse-transition="false"
        :default-active="active"
        unique-opened
        v-if="menus.length"
        @select="selectMenu"
    >
        <div class="p-4 font-bold title text-center cursor-pointer" @click="goIndex">
            <slot name="logo">
                <i class="iconfont icon-liushuixian-liushuixianx" />
            </slot>
            <span class="ml-2" v-if="!folded">{{ title }}</span>
        </div>
        <template v-for="menu in menus">
            <el-menu-item v-if="!menu.children?.length" :key="menu.path" :index="menu.path">
                <el-icon>
                    <component :is="menu.icon" />
                </el-icon>
                <span>{{ menu.name }}</span>
            </el-menu-item>
            <el-sub-menu v-else :key="menu.id" :index="menu.path">
                <template #title>
                    <el-icon>
                        <component :is="menu.icon" />
                    </el-icon>
                    <template v-if="!folded">{{ menu.name }}</template>
                </template>
                <el-menu-item v-for="child in menu.children" :key="child.path" :index="child.path">
                    {{ child.name }}
                </el-menu-item>
            </el-sub-menu>
        </template>
    </el-menu>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const props = defineProps({
    menus: { type: Array, default: [] },
    folded: { type: Boolean, default: false },
    current: { type: Object },
    title: { type: String },
});
const opened = computed(() => {
    let menus = props.menus;
    if (!menus.value || !menus.value.length) {
        return [];
    }

    return [menus.value[0].path];
});
const router = useRouter();
const route = useRoute();
const active = computed(() => {
    return router.currentRoute.value.fullPath;
});

function goIndex() {
    router.push('/')
}

/**
 * 选择菜单
 */
function selectMenu(e) {
    if (!e) {
        return;
    }

    if (e.startsWith('http')) {
        let appCode = route.params.appCode 
        router.push(`/${appCode}/html?url=` + e)
    } else {
        router.push(e);
    }
}
</script>

<style lang="scss" scoped>
.left-menu {
    border-right: none;
    // border-right: 1px solid var(--main_border_color);
    box-shadow: 0 0 5px var(--el-menu-box-shadow-color);
    z-index: 6;
    overflow-y: auto;

    :deep() {
        .el-menu--inline {
            background-color: var(--el-menu-inline-bg-color);
        }

        .el-menu-item {
            border-left: 3px solid transparent;
        }

        .el-menu-item.is-active {
            font-weight: bold;
            border-color: var(--primary_color);
        }
    }
}

.left-menu:not(.el-menu--collapse) {
    width: 220px;
}

.title {
    color: var(--el-menu-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

::-webkit-scrollbar {
    background-color: var(--el-menu-bg-color);
}

::-webkit-scrollbar-thumb {
    background-color: var(--el-menu-bg-color);
}

</style>
